import type { UserConfig, ConfigEnv } from "vite"
import { defineConfig, loadEnv } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
import { fileURLToPath } from "url"

// 依赖引入
import AutoImport from "unplugin-auto-import/vite"
import Icons from "unplugin-icons/vite"
import Components from "unplugin-vue-components/vite"
import IconsResolver from "unplugin-icons/resolver"
import ElementPlus from "unplugin-element-plus/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"

import ViteCompression from "vite-plugin-compression"
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
import { viteMockServe } from "vite-plugin-mock"

import { createHtmlPlugin } from "vite-plugin-html"

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
	// 获取当前工作目录
	const root = process.cwd()
	// 获取环境变量
	const env = loadEnv(mode, root)
	console.log("env", env)
	return {
		plugins: [
			// Vue模板文件编译插件
			vue(),
			// * 使用 svg 图标
			createSvgIconsPlugin({
				iconDirs: [path.resolve(process.cwd(), "src/svg")],
				symbolId: "icon-[dir]-[name]"
			}),
			// 开启ElementPlus自动引入CSS
			ElementPlus({}),
			// 自动引入组件及ICON
			AutoImport({
				imports: ["vue", "vue-router", "pinia"],
				// 处理eslint
				eslintrc: {
					enabled: true
				},
				resolvers: [IconsResolver(), ElementPlusResolver()],
				dts: fileURLToPath(new URL("./types/auto-imports.d.ts", import.meta.url))
			}),
			// 自动注册组件
			Components({
				resolvers: [IconsResolver(), ElementPlusResolver()],
				dts: fileURLToPath(new URL("./types/components.d.ts", import.meta.url))
			}),
			ViteCompression({
				verbose: true,
				disable: false,
				// 文件超过多少进行压缩
				threshold: 1024 * 10,
				ext: ".gzip", // .gzip 或者 .gz都是一样的
				// 压缩后是否删除原文件
				deleteOriginFile: false,
				algorithm: "brotliCompress" //压缩算法 默认gzip
			}),
			viteMockServe({
				// 如果接口为 /mock/xxx 以 mock 开头就会被拦截响应配置的内容
				mockPath: "./src/mock" // 数据模拟需要拦截的请求起始 URL
			}),
			// 自动安装图标
			Icons({
				autoInstall: true
			}),
			createHtmlPlugin({
				inject: {
					data: {
						// isProd: env === "production"
						// echartscript: '<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>',
						// wangEditorscript: '<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/index.min.js"></script>'
					}
				}
			})
		],
		define: {
			// enable hydration mismatch details in production build
			__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "true"
		},
		// 运行后本地预览的服务器
		server: {
			// 是否开启https
			// 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
			host: true,
			// 开发环境预览服务器端口
			port: 9000,
			// 启动后是否自动打开浏览器
			open: false,
			// 是否开启CORS跨域
			cors: true,
			// 代理服务器
			// 帮助我们开发时解决跨域问题
			proxy: {
				// 这里的意思是 以/api开头发送的请求都会被转发到 http://xxx:9000
				"/api": {
					target: "http://123.207.32.32:5000",
					// 改变 Host Header
					changeOrigin: true,
					// 发起请求时将 '/api' 替换为 ''
					rewrite: path => path.replace(/^\/api/, "")
				},
				"/mock/api": {
					target: "http://localhost:8000",
					// 改变 Host Header
					changeOrigin: true
					// 发起请求时将 '/api' 替换为 ''
					//rewrite: (path) => path.replace(/^\/api/, ""),
				}
			}
		},
		// 打包配置
		build: {
			// 关闭 sorcemap 报错不会映射到源码
			sourcemap: false,
			// 打包大小超出 400kb 提示警告
			chunkSizeWarningLimit: 400,
			cssCodeSplit: true,
			rollupOptions: {
				// 打包入口文件 根目录下的 index.html
				// 也就是项目从哪个文件开始打包
				input: {
					index: fileURLToPath(new URL("./index.html", import.meta.url))
				},
				// 将会在每个文件发现的第一个副作用打印到控制台
				// 副作用包括 DOM的更新 操作等
				// experimentalLogSideEffects: true,
				treeshake: {
					// safest recommended smallest
					// smallest 尽可能合并 也就是尽可能的进行tree shaking  将没用的代码删除
					preset: "recommended",
					propertyReadSideEffects: true
				},
				// 静态资源分类打包
				output: {
					// 仅会合并那些没有副作用的包
					experimentalMinChunkSize: 10 * 1024, //单位为b  表示小于20kb 合并chunk
					format: "esm",
					// 静态资源分类
					chunkFileNames: "static/js/[name]-[hash].js",
					entryFileNames: "static/js/[name]-[hash].js",
					assetFileNames: "static/[ext]/[name]-[hash].[ext]",
					// manualChunks: (id: string) => {
					// 	// if (id.includes("html2canvas")) {
					// 	//   return "html2canvas";
					// 	// }
					// 	// if (id.includes("node_modules")) {
					// 	//   return "vender";
					// 	// }
					// 	// return "index";
					// },
					// 分离出第三方包和业务代码
					manualChunks(id) {
						if (id.includes("node_modules")) {
							// id 是打包的每个包的绝对路径
							// 筛选出包名 比如打包id为node_modules/element-plus/lib/xxx 筛选出element-plus
							// console.log(id.toString().split("node_modules/")[1].split("/")[0].toString());
							return id.toString().split("node_modules/")[1].split("/")[0].toString()
						}
					}
				}
			}
			// 删除打包文件中的console.log 和debugger
			// minify: "terser"
			// // terserOptions: {
			// // 	// 清除console和debugger
			// // 	compress: {
			// // 		drop_console: true,
			// // 		drop_debugger: true
			// // 	}
			// // }
		},
		// 配置别名
		resolve: {
			alias: {
				"@": path.resolve(__dirname, "src"), //配置@路径
				"#": fileURLToPath(new URL("./types", import.meta.url))
			}
		}
	}
})
